<!DOCTYPE html>
<html>
    <head>
        <meta name="author" content="Kwh">
        <meta charset="utf-8">
        <title></title>
        <style>
            html,body{
                  box-sizing: border-box;
                  font-size: 10px;
                  background-color: #f4f4f4;
            }
            body{
                margin: 0;
            }
            #top{
                display: flex;
                top: 0;
                height: 40px;
                background-color: #f4f4f4;
                
            }
            #body{
                width: 1200px;
                height: 40px;
                margin: 0 auto;
                position: relative;
                top: -40px;
            }
            #btn1{
                width: 90px;
                height: 30px;
                margin: 5px 0;
                border-style: none;
                background-color: white;
                border: 1px solid deepskyblue;
                color: deepskyblue;
                background-image: url(../img/QQ.png);
                background-repeat: no-repeat;
                background-position: -2px -2px;
                text-align: right;
            }
            #btn2{
                width: 90px;
                height: 30px;
                margin: 5px 0;
                border-style: none;
                background-color: white;
                border: 1px solid deepskyblue;
                color: deepskyblue;
                background-image: url(../img/人.png);
                background-repeat: no-repeat;
                background-position: -2px -2px;
                text-align: right;
            }
            #tou{
                color: gray;
                font-size: 1.3rem;
            }
            #t1{
                width: 420px;
                height: 40px;
                /*background-color: red;*/
                float: right;     
            }
            #t1 #btn3{
                width: 90px;
                height: 30px;
                margin: 5px 0;
                border-style: none;
                background-color: #f4f4f4;
                color: gray;;
                background-image: url(../img/金币.png);
                background-repeat: no-repeat;
                background-position: -2px -2px;
                text-align: right;
            }
            #t1 #btn4{
                width: 90px;
                height: 30px;
                margin: 5px 0;
                border-style: none;
                background-color: white;
                border: 1px solid deepskyblue;
                color: deepskyblue;
                background-image: url(../img/QQ.png);
                background-repeat: no-repeat;
                background-position: -2px -2px;
                text-align: right;
            }
            #t1 #btn5{
                width: 90px;
                height: 30px;
                margin: 5px 0;
                border-style: none;
                background-color: white;
                border: 1px solid limegreen;
                color: limegreen;
                background-image: url(../img/微信.png);
                background-repeat: no-repeat;
                text-align: right;
            }
            /*链接头*/
            #tou2{
                width: 100%;
                height: 90px;
                margin: -40px auto 0 auto;
                background-color: white;
            }
            #tou2 #tu1{
                width: 150px;
                height: 80px;
                background-image: url(../img/qiantu.png);
                background-repeat: no-repeat;
                background-position: 0 17px;
            }
            #tou2 #body2{
                width: 1200px;
                height: 90px;
                margin: 0 auto;
            }
            #tou2 ul{
                display: inline-block;
                list-style: none;
                position: relative;
                top: -72px;
                margin-left: 150px;
                font-size: 2rem;
                
            }
            #tou2 ul li{
                height: 60px;
                float: left;
                margin-left: 45px;   
                color: gray;
            }
            #tou2 ul li:hover{
                color: orange;
                border-bottom: 2px solid orange;
                cursor: pointer;
            }
            #tou2 #active{
                color: orange;
                border-bottom: 2px solid orange;
            }

            /*banner*/
            #banner{
                width: 100%;
                height: 160px;
                background-image: url(../img/indexbg.jpg);
            }
            #banner span{
                width: 450px;
                font-weight: bold;
                display: block;
                color: white;
                font-size: 4rem;
                margin: 5px auto;
                
            }
            
            #banner #btn6{
                width: 600px;
                height: 50px;
                margin-top: 20px;
                margin-left: 30%;
            }
            #banner #btn7{
                border-style: none;
                background-color: lightgreen;
                color: white;
                height: 55px;
                width: 100px;
                font-size: 1.5rem;
                padding: 0;
                margin-left: -7px;
            }
            #banner #btn8{
                border-style: none;
                background-color: orange;
                color: white;
                height: 55px;
                width: 100px;
                font-size: 1.5rem;
                padding: 0;
               
            }
            /*轮播图*/
            #img{
                display: block;
                margin: 0 auto;
            }

            /*轮播图下面*/
            #tou3{
                width: 1200px;
                height: 70px;
                margin: 5px auto;
            }
            #tou3 ul{
                list-style: none;
                margin: 0 ;
                padding: 0;
                display: flex;
                justify-content: space-between;
            }
            #tou3 ul li{
               
                width: 160px;
                height: 70px;
                margin-left: 2px;
                text-align: center;
                font-size: 2rem;
                color: gray;
                line-height: 3;
                font-weight: bold;
            }
            #tou3 ul li:nth-child(1){
                background-color: #EED9BB;
            }
            #tou3 ul li:nth-child(2){
                background-color: #EDDBCC;
            }
            #tou3 ul li:nth-child(3){
                background-color: #B8D2FB;
            }
            #tou3 ul li:nth-child(4){
                background-color: #EADFBF;
            }
            #tou3 ul li:nth-child(5){
                background-color: #B7E2EF;
            }
            #tou3 ul li:nth-child(6){
                background-color: #D6E7C0;
            }
            #tou3 ul li:nth-child(7){
                background-color: #C1E7C0;
            }

            /*分隔线*/
            #tou4{
                width: 1200px;
                height: 320px;
                margin: 5px auto;
            }
            #tou4 #ul1{
                display: inline-block;
                width: 800px;
                height: 70px;
                background-color: white;
                
            }
            #tou4 #ul1 ul{
                list-style: none;
                margin: 0;
                padding: 0;
                
            }
            #tou4 #ul1 ul li{
                height: 68px;
                float: left;
                font-size: 2.5rem;
                font-weight: bold;
                line-height: 2.5;
                margin-left: 120px;
            }
            #tou4 #ul1 ul li:hover{
                color: orange;
                border-bottom: 2px solid orange;
                cursor: pointer;
            }
            #tou5{
                display: inline-block;
                width: 800px;
                height: 250px;
                margin-top: 2px;
                background-color: white;
                font-size: 1.4rem;
            }
            #tou5 ul{
                list-style: none;
                float: left;
                margin-left: 70px;

            }
            #tou5 ul li{
                line-height: 2.5;
                color: gray;
            }
            #tou5 ul li:hover{
                color: orange;
                cursor: pointer;
            }

            #tou6{
                width: 390px;
                height: 60px;
                float: right;
            }
            #tou6 ul{
                list-style: none;
                margin: 0;
                padding: 0;
            }
            #tou6 ul li{
                width: 95px;
                height: 60px;
                float: right;
                background-color: white;
                position: relative;
                top:-70px;
                text-align: center;
                line-height: 4;
                margin-left: 2px;
                font-size: 1.5rem;
            }
            #tou6 ul li:hover{
                cursor: pointer;
                color: green;
            }

            #tou7{
                display: inline-block;
                width: 390px;
                height: 90px;
                background-color: white;
                float: right;
                position: absolute;
                margin-left: 10px;
            }
            #tou7 span{
                display: inline-block;
                float: left;
                margin-left: 10px;
                font-size: 1.5rem;
                color: gray;
            }
            #tou7 strong{
                float: right;
                color: gray;
            }

            #tou8{
                display: inline-block;
                background-color: white;
                width: 390px;
                height: 165px;
                float: right;
                position: relative;
                top:-170px;
                overflow: hidden;
            }
            #tou8 ul{
                list-style: none;
                margin: 0;
                padding: 0;
                margin-left: 20px;
                font-size: 1.6rem;
                color: #666;
            }
            #tou8 ul li{
                line-height: 3;
            }
            #tou8 ul li:nth-child(1){
                border-bottom: 1px dotted gray;
            }
            #tou8 ul li:nth-child(2){
                border-bottom: 1px dotted gray;
            }


            #tou9{
                width: 1200px;
                height: 80px;
                margin: 10px auto;
                background-color: white;
                
            }
            #tou9 ul{
                width: 1200px;
                height: 80px;
                list-style: none;
                margin: 0;
                padding: 0;
                position: relative;
                top: -165px;
                display: flex;
                justify-content: space-between;
                
            }
            #tou9 ul li{
                height: 79px;
                width: 100px;
                border: 1px solid white;
            }
            #tou9 ul li img{
                margin-top: 10px;
                margin-left: 30px;
            }
            #tou9 ul li span{
                display: block;
                margin-left: 25px;
            }
            #tou9 ul li #gongju{
                margin: 0;
                margin-top: 15px;
                font-size: 1.4rem;
                text-align: center;
            }
            #tou9 ul li:hover{
                border: 1px solid #99C800;
                color: #99C800;
                cursor: pointer;
            }
            h2{
                display: block;
                width: 1200px;
                height: 30px;
                margin: 20px auto;
                color:gray;
                font-size: 2rem;
            }


            #tou10{
                width: 1200px;
                height: 270px;
                margin: 0 auto;
            }
            #tou10 ul{
                list-style: none;
                margin: 0;
                padding: 0;
            }
            #tou10 ul li{
                display: inline-block;
                width: 220px;
                height: 250px;
                float: left;
                border: 10px solid #f4f4f4;
            }
            #tou10 ul li:hover{
                border-color: white;
                background-color: white;
                cursor: pointer;
                
            }
            #tou10 ul li:nth-child(4){
                margin-top: -13px;
            }
            #tou10 ul li:nth-child(5){
                margin-top: -13px;
            }
            
            #tou10 ul li img{
                width: 220px;
                height: 230px;
            }
            #tou10 ul li span{
                display: block;
                text-align: center;
                font-size: 1.6rem;
                color: #666;
            }

            #tou11{
                width: 1200px;
                height: 30px;
                margin: 10px auto;
            }
            #tou11 ul{
                width: 1200px;
                height: 30px;
                list-style: none;
                margin: 0;
                margin-top: 50px;
                padding: 0;
                margin-left: 10px;
                font-size: 1.5rem;
                color: #666;
                border-bottom: 1px solid gray;
            }
            #tou11 ul li{
                float: left;
                margin-left: 10px;
                opacity: 0.6;
            }
            #tou11 ul li:hover{
                opacity: 1;
                cursor: pointer;
            }

            #bottom{
                width: 100%;
                height: 120px;
                background-color: black;
                display: flex;
                bottom: 0;
            }
            #tou12{
                width: 1200px;
                height: 80px;
                margin: 10px  auto;
            }
            #tou12 ul{
                list-style: none;
                margin: 0;
                margin-top: 20px;
                padding: 0;
                color: white;
            }
             #tou12 ul li{
                 float: left;
                 font-size: 1.4rem;
                 margin-left: 10px;
             }
             #tou12 #btn9{
                width: 110px;
                height: 30px;
                margin: 5px 0;
                border-style: none;
                background-color: white;
                border: 1px solid deepskyblue;
                color: deepskyblue;
                background-image: url(../img/QQ.png);
                background-repeat: no-repeat;
                background-position: -2px -2px;
                text-align: right;
                margin-top: -5px;
             }
             #tou12 span{
                 color: gray;
             }
             #tou12 p{
                 color: gray;
                 margin-left: 10px;
             }
             #tou12 p img{
                 width: 23px;
                 height: 25px;
                 margin-left: 5px;
                 margin-top: 5px;
                 background-image: url(../img/tu.png);
                 background-repeat: no-repeat;
                 background-position: -120px -227px;
             }

        </style>
    </head>
    <body>
        <div id="top">
        </div>

        <div id="body">
            <div id="tou">
                <!--头-->
                <input id="btn1" type="button" value="QQ交谈">
                <input id="btn2" type="button" value="官方QQ群">
                <span>常见问题</span>
                    <div id="t1">
                        <input id="btn3" type="button" value="点我赚钱">
                        <span>注册</span>
                        <span>登录</span>
                        <input id="btn4" type="button" value="QQ登录">
                        <input id="btn5" type="button" value="微信登录">
                    </div>
                </div>
        </div>
            <!--链接头-->
            <div id="tou2">
                <div id="body2">
                <div id="tu1"></div>
                <ul>
                    <li id="active">首页</li>
                    <li>广告设计</li>
                    <li>淘宝设计</li>
                    <li>素材分类</li>
                    <li>千图灵感</li>
                    <li>设计工具</li>
                    <li>活动</li>
                    <li>VIP特权</li>
                </ul>
                </div>
            </div>
            
            <!--背景图-->
            <div id="banner">
                <span>专注免费设计素材网站</span>
                <input id="btn6" type="text">
                <input id="btn7" type="button" value="搜全站">
                <input id="btn8" type="button" value="搜原创">
            </div>
            <!--中间的轮播图-->
            <img id="img" src="../img/banner.jpg" alt="">
            <!--轮播图下面-->
            <div id="tou3">
                <ul>
                    <li>平面广告</li>
                    <li>电商淘宝</li>
                    <li>文档模板</li>
                    <li>摄影图库</li>
                    <li>网页UI</li>
                    <li>多媒体</li>
                    <li>空间建筑</li>
                </ul>
            </div>

            <div id="tou4">
                <div id="ul1">
                    <ul>
                      <li>热门</li>
                      <li>用途</li>
                      <li>背景</li>
                      <li>元素</li>
                  </ul>
                </div>
                <div id="tou5">
                    <ul>
                        <li>花纹</li>
                        <li>光线</li>
                        <li>鞭炮</li>
                        <li>线条</li>
                        <li>水滴</li>
                        <li>新</li>
                    </ul>
                    <ul>
                        <li>光</li>
                        <li>玫瑰花</li>
                        <li>花瓣</li>
                        <li>金币</li>
                        <li>树叶</li>
                        <li>月亮</li>
                    </ul>
                    <ul>
                        <li>云</li>
                        <li>气泡</li>
                        <li>汽车</li>
                        <li>灯笼</li>
                        <li>数字</li>
                        <li>光效</li>
                    </ul>
                    <ul>
                        <li>汤圆</li>
                        <li>剪纸</li>
                        <li>丝带</li>
                        <li>烟花</li>
                        <li>2017</li>
                        <li>树</li>
                    </ul>
                    <ul>
                        <li>星光</li>
                        <li>祥云</li>
                        <li>字体排版</li>
                        <li>红包</li>
                        <li>钻石</li>
                        <li>火焰</li>
                    </ul>
                </div>
                <div id="tou6">
                    <ul>
                        <li>站内公告</li>
                        <li>QQ群联盟</li>
                        <li>媒体报道</li>
                        <li>用户评价</li>
                    </ul>
                </div>
                <div id="tou7">
                    <br>
                    <span>什么？练习稿、飞机稿也能变废为宝?</span><strong>02-13</strong><br><br>
                    <span>2017年春节放假通知</span><strong>01-17</strong>
                </div>
                <div id="tou8">
                    <ul>
                        <li>设计师：2480万人&nbsp;&nbsp;&nbsp;占全国：81%</li>
                        <li>素材总数：840万张&nbsp;&nbsp;&nbsp;一周新增186,876张</li>
                        <li>总下载数：74,953万张&nbsp;昨日下载：1,136,784张</li>
                    </ul>
                </div>
            </div>
            <div id="tou9">
                    <ul>
                        <li><img src="../img/操作手册.png"><span>开发手册</span></li>
                        <li><img src="../img/UI.png"><span>UI图标库</span></li>
                        <li><img src="../img/手机.png"><span>淘宝工具</span></li>
                        <li><img src="../img/配色.png"><span>配色工具</span></li>
                        <li><img src="../img/网页.png"><span>网页工具</span></li>
                        <li><img src="../img/相机.png"><span>图标宝</span></li>
                        <li><img src="../img/相册.png"><span>画册宝</span></li>
                        <li><img src="../img/纸笔.png"><span>在线书法</span></li>
                        <li><img src="../img/黑板.png"><span>电商培训</span></li>
                        <li><img src="../img/淘宝.png"><span>店铺装修</span></li>
                        <li><span id="../gongju">更多设计工具</span></li>
                    </ul>
                </div>
                <h2>热门专题</h2>
                <div id="tou10">
                    <ul>
                        <li><img src="../img/1.jpg" alt=""><span>情人节秘技之约会狂魔</span></li>
                        <li><img src="../img/2.jpg" alt=""><span>桌面整理？啦啦啦</span></li>
                        <li><img src="../img/3.jpg" alt=""><span>开始上班了！一堆草泥马路过</span></li>
                        <li><img src="../img/4.jpg" alt=""><span>2017来了！开始奋斗</span></li>
                        <li><img src="../img/5.jpg" alt=""><span>一闪一闪亮晶晶</span></li>
                    </ul>
                </div>
                <div id="tou11">
                    <ul>
                        <li>友情链接</li>
                        <li>新素材</li>
                        <li>热门素材</li>
                        <li>热门ppt</li>
                        <li>热门淘宝素材</li>
                        <li>热门装饰素材</li>
                        <li>热门专题</li>
                        <li>搜索地址</li>
                    </ul>
                </div>
                <div id="bottom">
                    <div id="tou12">
                        <ul>
                            <li>官方微博</li>
                            <li>常见问题</li>
                            <li>版权声明</li>
                            <li>商务合作</li>
                            <li>售后服务</li>
                            <li>新素材</li>
                            <li>图片下载</li>
                            <li>素材专题</li>
                            <li>千图导航</li>
                            <li><input id="btn9" type="button" value="企业QQ交谈"></li>
                            <li><span>客服电话：400-998-7011</span></li>
                        </ul>
                        <br>
                        <br>
                        <p>千图网素材为用户免费分享产生，若发现您的权利被侵害，请联系tousu@58pic.com ，我们尽快处理<br>
                            Copyright © 2015千图网 沪ICP备10011451号-6 用时：0.0106 0.39 秒<img>上海工商</p>
                    </div>
                </div>
    </body>
</html>